<script setup lang="ts">
import zhCn from "@/layout/locals/zhCn";
import { ComponentInternalInstance, effect } from "vue";
import defaultSettings from "./config/defaultSettings";
import { userStore } from "./store/useStore";
import { deepClone } from "./utils/deepClone";
import { dragAnimate } from "./utils/dragAnimate";
import permissionToken from "./utils/permissionToken";
import { $ref } from "vue/macros";
const app = getCurrentInstance();
console.log("app", app);
const dragEle = ref();
const store = userStore();
const route = useRoute();
let locale = $ref(zhCn);
const config = reactive({
  max: 1,
});
let drawerVisible = ref(false);
function handleBreadcrumb(breadcrumb: any[]) {
  store.setBreadcrumb(breadcrumb);
}
watchEffect(() => {
  handleBreadcrumb(route.matched);
});
onMounted(() => {
  permissionToken();
  dragAnimate(dragEle.value!);
});
</script>

<template v-cloak>
  <el-config-provider :message="config" :locale="locale">
    <router-view />
    <div
      ref="dragEle"
      v-show="drawerVisible == false"
      draggable="true"
      class="setting"
    >
      <Icons color="#fff" name="Setting" />
    </div>
  </el-config-provider>
</template>

<style lang="scss">
// 暗黑模式
html.dark {
  --main-bg-color: var(--el-fill-color-blank);
  --scollbar-color: #1d1e1f;
}
html {
  --scollbar-color: #ccc;
  overflow-y: overlay;

  --main-bg-color: rgb(238, 238, 244);
}
:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
.el-empty {
  --el-empty-image-width: 100px !important;
}
#app {
  margin: 0;
  padding: 0;
  position: relative;
}
/* 三行代码去除上下箭头（其实这是百度的） */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
}

input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
}
.el-table__body-wrapper tr td.el-table-fixed-column--left,
.el-table__body-wrapper tr td.el-table-fixed-column--right {
  background-color: inherit;
}
.el-card,
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  transition: none;
}
.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9);
}
.setting {
  width: 50px;
  height: 50px;
  background-color: var(--el-color-primary);
  border-radius: 5px 0 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0px;
  bottom: 200px;
  z-index: 9999;
}
</style>
